<template>
    <div class="app-container">

        <!-- <PageHeader :border="false" title="法警负责人审批"/> -->
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="auto">
            <el-form-item label="部门名称" prop="depname">
                <el-input v-model="queryParams.depname" clearable @clear="getLists" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getLists">
                    <el-icon class="me-1">
                        <Search />
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleRest(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-space class="mb-3">
            <el-button type="primary" plain icon="Plus" @click="AddEditClothingSendRef.showAddDrawer()">
                新增
            </el-button>
        </el-space>
        <AddEditClothingSend ref="AddEditClothingSendRef" @aa="bb"  />

        <el-tabs type="border-card" v-model="activeTab" @tab-change="tabclick">
            <el-tab-pane label="服装装备发放" name="ClothingProvideAppl">
                <ClothingProvide ref="ClothingProvideRef" />
            </el-tab-pane>
            <el-tab-pane label="服装装备到期预警" name="ClothingWarningAppl">
                <ClothingWarning ref="ClothingWarningRef" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import PageHeader from "@/components/PageHeader/index.vue";

import ClothingProvide from "./ClothingProvide/ClothingProvide.vue";
import ClothingWarning from "./ClothingWarning/ClothingWarning.vue";
import AddEditClothingSend from "./AddEditClothingSend/AddEditClothingSend.vue";


// import { getCaseBuildList, deleteCaseBuild, } from "@/api/CaseBuild/CaseBuild";
const queryParamsRef = ref()

const ClothingProvideRef = ref({})
const ClothingWarningRef = ref({})
const AddEditClothingSendRef = ref({})

const queryParams = ref({
    depname: ''
})
const activeTab = ref('ClothingProvideAppl'); // 默认选中的tab

onMounted(() => {
    getLists()
})

// 获取列表
const getLists = async () => {
    tabclick(activeTab.value)
}
// tab 切换事件
const tabclick = (tab) => {
    if (tab == "ClothingProvideAppl") {
        ClothingProvideRef.value.showProvideApply(queryParams.value.depname)
    }
    if (tab == "ClothingWarningAppl") {
        ClothingWarningRef.value.showWarningApply(queryParams.value.depname)
    }
};

// 
const bb = async () => {
    //  loading.value = true;
// alert("1");
AddEditClothingSendRef2.showAddDrawer()

}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {}
    tabclick(activeTab.value)
}
</script>

<style scoped>
:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f;
    /* 修改为你想要的红色 */
    color: white
}

:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f;
    /* 修改为你想要的红色 */
    color: white
}
</style>